<template>
  <div class="box">
    <div class="card">
      <van-checkbox v-bind:value="checked" @click="changeState" :disabled="isEdit"></van-checkbox>
      <van-swipe-cell>
        <van-card
          :num="item.num"
          :price="item.price"
          :title="item.goodsName"
          class="goods-card"
          :thumb="item.img"
        />
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="delCardGoods(item.id)"/>
        </template>
      </van-swipe-cell>
    </div>
    <van-stepper v-model="item.num" v-show="isEdit" />
  </div>
</template>

<script>
export default {
  name: "CartItem",
  props: ["item"],
  data() {
    return {
      value: 1,
      checked: false,
      isEdit:true,
    };
  },
  mounted() {
    this.checked = this.item.checked;
    this.$bus.$on("isEditChange",(value)=>{
        this.isEdit=value
    })
  },
  watch: {
    item: {
      handler() {
        this.checked = this.item.checked;
      },
    },
  },
  methods: {
    changeState() {
      this.checked = !this.checked;
      this.$bus.$emit("changeItemState", this.item.id);
    },
    // 删除事件
     delCardGoods(cartId) {
      this.$dialog
        .confirm({
          title: "删除商品",
          message: "确定删除此商品吗？？？",
        })
        .then(() => {
          console.log(cartId);
          this.$store.dispatch("delCartDB", cartId);
          console.log("删除成功");
          // on confirm
        })
        .catch(() => {
          // on cancel
          console.log("删除失败");
        });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  background: #fff;
  border-bottom: 1px solid #eaeaea;
}
.van-stepper {
  text-align: right;
  padding-right: 15px;
  position: relative;
  top: -10px;
}
.card {
  display: flex;
  padding: 10px 15px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  .van-swipe-cell {
    width: 95%;
  }
}
.goods-card {
  margin: 0;
  background-color: white;
  background: #eaeaea;
}

.delete-button {
  height: 100%;
}
</style>